<template>
  <div>
  <ContentNavigation />
  <div class="articleDiv">
    <div v-if="articleItem.articleFirstImage === (global.recommendImg+'/static/img/推荐.jpg')" />
    <div v-else><el-image
        :src="articleItem.articleFirstImage"
        style="width: 100%;height: 400px" />
    </div>
    <br>
    <div style="margin-top: 4px;font-weight: bolder;font-size: 180%">
      {{ articleItem.articleTitle }}
    </div>
    <br>
    <div>
      <div style="display: inline-block">
        <el-avatar :size="35" :src="articleItem.users.usersPortrait" />
      </div>
      <div style="display: inline-block">
        <div>
          {{ articleItem.users.usersName }}
        </div>
        <div style="size: A3;margin-top: 4px;" class="el-icon-collection">
          {{ articleItem.community.communityName }}
        </div>
      </div>
      <!--发布时间 - 通过主文件已配置的时间格式显示-->
      <div class="el-icon-view" style="font-size: 13px">
        浏览量:{{ articleItem.articlePageView }}
      </div>
    </div>
    <div>
   <div class="articleContentDiv" style="margin-top: 10px">
    <mavon-editor
        style="z-index: 1;min-height: 1px"
        class="md"
        :value="articleItem.articleContent"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"/>
   </div>
    <div style="display: inline-block;margin-top: 15px;margin-bottom: 15px;color: #1b3e58;font-size: 13px">
      编辑于{{ articleItem.articleCreatingTime }}
    </div>
    <div style="display: inline-block;margin-left: 430px;color: #1078e0;font-size: 13px">
      <div v-if="likeArticleStateBool === false" @click="likeArticle()">👍点赞</div>
      <div v-else @click="disLikeArticle()">👍取消点赞</div>
    </div>
    <Comment :users="users" :article-item="articleItem" :comment-type="1" :comment-prop="commentProp" :comment-list-size-prop="commentListSizeProp"/>
    <div style="height: 100px" />
  </div>
  </div>
  </div>
</template>
<script>
import request from "../utils/request";
import TimeDisposal from "../components/timeDisposal";
import ContentNavigation from "../components/contentNavigation";
import Comment from "../components/comment";
export default {
  components: {Comment, ContentNavigation,TimeDisposal },
  data() {
    return {
      likeArticleContent:{
        likeUsers:0,
        likeArticle:0,
        likeArticleState:0,
        articleLike:0,
      },
      likeArticleStateBool:false,
      articleItem:{
        users:{
          usersPortrait:""
        },
        community:{
          communityName:""
        }
      },
      commentProp:[],
      commentListSizeProp:0,
      users:{},
      articleId:'',
      articleCreatingTime:''
    };
  },
  methods: {
    likeArticle(){
      if (this.users !== ''){
        this.likeArticleContent.likeUsers=this.users.usersId;
        this.likeArticleContent.likeArticle=this.articleId;
        this.likeArticleContent.likeState=1;
        this.articleItem.articleLike=this.articleItem.articleLike+1;
        this.likeArticleContent.articleLike=this.articleItem.articleLike;
        request.post('/article/usersLikeArticle',this.likeArticleContent)
        this.likeArticleStateBool=true;
      }else {
        this.$message.warning("请登录后再进行点赞相关操作哦~")
      }
    },
    disLikeArticle(){
      if (this.users !== ''){
      this.likeArticleContent.likeUsers=this.users.usersId;
      this.likeArticleContent.likeArticle=this.articleId;
      this.likeArticleContent.likeState=0;
      this.articleItem.articleLike=this.articleItem.articleLike-1;
      this.likeArticleContent.articleLike=this.articleItem.articleLike;
      request.post('/article/usersLikeArticle',this.likeArticleContent)
      this.likeArticleStateBool=false;
      }else {
        this.$message.warning("请登录后再进行点赞相关操作哦~")
      }
    },
    initArticleAndComment() {
        request.get('/comment/selectArticleAndComment/?articleId='+this.articleId+"&usersIP="+returnCitySN['cip']+"&usersId="+this.users.usersId).then((res)=>{
          this.likeArticleStateBool=res.data.multipleArticle.like
          this.articleItem=res.data.multipleArticle;
          document.title=this.articleItem.articleTitle+" - 贴乎";
          this.articleCreatingTime=this.articleItem.articleCreatingTime;
          if (res.msg !== "此评论数量不够"){
            this.commentListSizeProp=res.data.commentMap.commentListSize
            this.commentProp=res.data.commentMap.commentAndReplyContent
          }
        })
    },
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData")) === null ? '' : JSON.parse(localStorage.getItem("userData"))
    this.articleId=JSON.parse(this.$route.params.articleId)
  },
  mounted() {
    this.initArticleAndComment();
  },
}
</script>

<style scoped>
.articleDiv{
  margin: 0 auto;
  max-width: 700px;
  margin-top: 70px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>
